@import '@/style/public/comm_box_list.css';
@import '@/style/style/skin.css';

.cover {
    width: 100%;
    filter: blur(10rpx);
    position: fixed;
    top: 0;
    left: 0;
}

.text-red {
    color: #eb7887 !important;
}

.bg-red {
    background-color: #eb7887 !important;
    color: var(--white) !important;
}

.main {
    padding: 30rpx 20rpx;
    position: relative;
}

.title-box {
    width: 100%;
    padding: 50rpx 30rpx 40rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 0rpx;
    position: relative;
    overflow: hidden;
}

.title-box .mark {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8rpx 16rpx 6rpx 20rpx;
    border-bottom-left-radius: 30rpx;
    font-size: 22rpx;
    background-color: var(--projectCompareColor);
    color: #fff;
}

.title-box .left {
    margin-right: 30rpx;
}

.title-box .left image {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
}

.title-box .right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.title-box .right .line1 {
    font-size: 30rpx;
    color: #000;
    padding: 0 0;
}

.title-box .right .line2 {
    font-size: 24rpx;
    color: #999;
    padding: 10rpx 0 0rpx;
}

.title-box .right .line2 .tag-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.title-box .right .line2 .tag-list > text {
    padding: 6rpx 10rpx;
    font-size: 22rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    background-color: #f2f2f2;
    border-radius: 6rpx;
    color: #777;
}

.title-box .right .line3 {
    font-size: 24rpx;
    color: #999;
    padding: 0rpx 0;
    margin-top: 6rpx;
}

.title-box .right .line3 .star {
    text-align: left;
    font-size: 24rpx;
    color: var(--yellow);
}

.title-box .right .line3 .star > text {
    margin-right: 4rpx;
}

.detail-box {
    width: 100%;
    background-color: #fff;
    margin-top: 12rpx;
    border-radius: 10rpx;
}

.meet-tab {
    width: 100%;
    display: flex;
    font-size: 28rpx;
    color: #333;
    line-height: 80rpx;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2rpx dotted #ddd;
}

.meet-tab .item {
    padding: 0 20rpx;
    position: relative;
    color: #999;
}

.meet-tab .item.cur {
    font-weight: bold;
    color: #333;
}

.meet-tab .item.cur:after {
    border-radius: unset !important;
    background-color: unset !important;
    transform: unset !important;
    border-top-left-radius: unset !important;
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
    border-bottom-left-radius: unset !important;

    content: '' !important;
    width: 30rpx !important;
    height: 30rpx !important;
    position: absolute !important;
    left: calc(50% - 15rpx) !important;
    bottom: 0rpx !important;
    border-top: 6rpx solid var(--projectColor) !important;
    border-right: 6rpx solid var(--projectColor) !important;
    border-top-right-radius: 100% !important;
    transform: rotate(-225deg) !important;
    border-top-width: 6rpx !important;
    border-top-style: solid !important;
    border-top-color: var(--projectColor) !important;
    border-right-width: 6rpx !important;
    border-right-style: solid !important;
    border-right-color: var(--projectColor) !important;
}

.date {
    white-space: nowrap;
    display: flex;
    background-color: #fff;
    padding: 25rpx;
    height: 245rpx;
}

.date .item {
    font-family: 'din';
    border: 2rpx solid #ebebeb;
    background-color: #f2f2f2;
    width: 110rpx;
    height: 170rpx;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 15rpx;
    color: #333;
    position: relative;
    overflow: hidden;
}

/* 关键：保证横向滚动时子项不被压缩，形成可拖动的横向列表 */
.date .date-inner {
    display: inline-flex;
    flex: 0 0 auto;
}

.date .item .status {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    font-size: 22rpx;
    background-color: #e0e0e0;
    color: #666;
    border-bottom-left-radius: 4rpx;
    border-top-right-radius: 10rpx;
    padding: 2rpx 5rpx;
}

.date .item .status.cur {
    background-color: var(--projectColor);
    color: #fff;
    font-size: 22rpx;
    font-weight: bold;
}

.date .item.cur {
    border-color: var(--projectColor);
    background-color: #eaeeff;
}

.date .item .week {
    font-size: 26rpx;
    margin-top: 20rpx;
}

.date .item.cur .week,
.date .item.cur .day {
    font-weight: bold;
}

.date .item .day {
    font-size: 26rpx;
    margin-top: 10rpx;
}

.time-title {
    width: 100%;
    padding: 30rpx 30rpx;
    font-size: 32rpx;
    font-weight: bold;
}

.time {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 25rpx;
    background-color: #fff;
    border-top: 4rpx solid #f2f2f2;
}

.time .item {
    width: calc((100% - 40rpx) / 3);
    background-color: #f2f2f2;
    border: 2rpx solid #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    height: 135rpx;
    font-size: 28rpx;
    border-radius: 8rpx;
    position: relative;
}

.time .item.cur {
    border-color: var(--projectColor);
    background-color: var(--projectColor);
}

.time .item.cur .t1,
.time .item.cur .t3 {
    color: #fff !important;
}

.time .item .status {
    position: absolute;
    top: -2rpx;
    right: -2rpx;
    font-size: 22rpx;
    padding: 4rpx 6rpx;
    background-color: #e0e0e0;
    border-bottom-left-radius: 4rpx;
    border-top-right-radius: 10rpx;
    color: #666;
}

.time .item.cur .status {
    background-color: var(--projectColor);
    color: #fff;
}

.time .item.selected {
    border-color: #ebebeb;
    color: #e7e7e7;
    background-color: #fcfcfc;
}

.time .item:nth-child(3n + 1),
.time .item:nth-child(3n + 2) {
    margin-right: 20rpx;
}

.time .item .t1 {
    color: #000;
    font-size: 26rpx;
    margin-top: 18rpx;
}

.time .item.selected .t1,
.time .item.selected .t2,
.time .item.selected .t3 {
    color: #aaa;
}

.time .item .t2,
.time .item .t3 {
    margin-top: 5rpx;
}

.time .item .t2 {
    font-weight: bold;
}

.time .item .t3 {
    color: #666;
    font-size: 24rpx;
}

.time .item.cur .t3 {
    color: #000;
}

.bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    background-color: #fff;
}

.bottom .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bottom .inner .line1 {
    width: 100%;
    display: flex;
    padding: 10rpx 25rpx 20rpx;
    font-size: 30rpx;
    color: #777;
}

.bottom .inner .line2 {
    border-top: 2rpx solid #ddd;
    width: 100%;
    display: flex;
    padding: 0rpx 0rpx 0rpx 25rpx;
    height: 110rpx;
    font-size: 36rpx;
}

.bottom .inner .line2 .left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: bold;
    height: inherit;
    font-size: 32rpx;
}

.bottom .inner .line2 .right {
    width: 270rpx;
    background-color: var(--projectColor);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    font-weight: bold;
}

.day-load.notexist::after {
    content: '没有可预约的时段';
}

/*** 详情盒子 ***/
.article-box {
    box-sizing: border-box;
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 20rpx;
    margin-bottom: 200rpx;
    min-height: 500rpx;
}

.article-box .article {
    background-color: #fff;
    padding: 10rpx 30rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.article-box .article .content {
    margin-top: 24rpx;
    color: #444;
    font-size: 28rpx;
    text-align: justify;
    line-height: 1.6;
}

.article-box .article .pics {
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.article-box .article .pics image {
    width: 100%;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}

.cmpt-biz-detail-mode-left {
    bottom: 120rpx !important;
}
